<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        height: 550px;
        width: 500px;
      }
      @keyframes bounceInLeft {
        from,
        60%,
        75%,
        90%,
        to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
          opacity: 0;
          transform: translate3d(-3000px, 0, 0);
        }
        60% {
          opacity: 1;
          transform: translate3d(25px, 0, 0);
        }
        75% {
          transform: translate3d(-10px, 0, 0);
        }
        90% {
          transform: translate3d(5px, 0, 0);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
      @keyframes bounceInRight {
        from,
        60%,
        75%,
        90%,
        to {
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        0% {
          opacity: 0;
          transform: translate3d(3000px, 0, 0);
        }
        60% {
          opacity: 1;
          transform: translate3d(-25px, 0, 0);
        }
        75% {
          transform: translate3d(10px, 0, 0);
        }
        90% {
          transform: translate3d(-5px, 0, 0);
        }
        100% {
          opacity: 1;
          transform: none;
        }
      }
      
      .page5-tu1 {
      
        animation: bounceInLeft 0.5s 0.25s linear forwards;
      }
      .page5-tu2 {
       
        animation: bounceInLeft 0.7s 0.45s linear forwards;
      }
      .page5-tu3 {
    
        animation: bounceInRight 0.9s 0.65s linear forwards;
      }
      .page5-tu4 {
  
        animation: bounceInRight 1.1s 0.85s linear forwards;
      }
      .aaa {
        margin-top: 400px;
        margin-left: 300px;
      }
      button {
        margin-left: 1460px;
        font-size: 32px;
      }
    </style>
  </head>
  <body>

    <div class="aaa">
      <img class="page5-tu1" src="./image/X1.jpg" name="travel1" />
      <img class="page5-tu2" src="./image/X2.jpg" name="travel2" />
      <img class="page5-tu5" src="./image/X4.jpg" name="travel5" />
      <img class="page5-tu4" src="./image/X3.jpg" name="travel4" />
      <img class="page5-tu3" src="./image/X5.jpg" name="travel3" />
    </div>
    <button style="height: 100px; width: 180px; color: rgb(142, 187, 184)">
      为爱冲锋
    </button>
    <script>
      document.getElementsByTagName("button")[0].onclick = function () {
        location.href =
          "kun1.html";
      };
    </script>
  </body>
</html>
